<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>仿小米首页</title>
	<link rel="stylesheet" type="text/css" href="xiaomi.css">
	
</head>
<body>
<!-- 导航条开始 -->
<div class="top">
	<div class="top_mid" >
		<div class="top_l">
	    	<a href="">小米商城</a>
			<span>|</span>
			<a href="">MIUI</a>
			<span>|</span>
			<a href="">米聊</a>
			<span>|</span>
			<a href="">游戏</a>
			<span>|</span>
			<a href="">多看阅读</a>
			<span>|</span>
			<a href="">云服务</a>
			<span>|</span>
			<a href="">金融</a>
			<span>|</span>
			<a href="">小米商城移动版</a>
			<span>|</span>
			<a href="">问题反馈</a>
			<span>|</span>
			<a href="">selectRegion</a>
			<span>|</span>
	
        </div>

		<div class="top_r">
			<a href="">登录</a>
			<span>|</span>
			<a href="">注册</a>
			<span>|</span>
			<a href="">消息通知</a>
			
			<a href="">购物车</a>
			
		</div>
	</div>

 </div>
	<!-- 导航条结束 -->
	<!-- 标题的开始 -->

	    <div class="header">
            <div class="header_mid">
				<div class="zuo">
					 <img src="img/nav.png">

	            </div>
	          	<div class="zhong">
	          	    <a href="two">小米手机</a>
	          	    <span></span>
					<a href="two">红米</a>
					<span></span>
					<a href="two">平板.笔记本</a>
					<span></span>	
	            	<a href="two">电视</a>
	            	<span></span>
					<a href="two">盒子.影音</a>
					<span></span>
					<a href="two">路由器</a>
					<span></span>
					<a href="two">智能硬件</a>
					<span></span>
					<a href="two">服务</a>
					<span></span>
					<a href="two">社区</a>
					<span></span>

			    </div>

	     		<div class="you">
	           		<input type="text/css" name="搜索框">

	    		</div>

            </div>

	   </div>

	<!-- 标题的结束 -->

	<!-- 主体部分的开始 -->

	<!-- 第二栏图框开始-->
	    <div class="main">
        	<div class="main_mid">
				<div class="shang">
	            	 <div class="shangyou">
						 <img src="img/diyizhang.jpg">
	            	 </div>
	            	 <div class="shangzuo">
	    					<ul  text-decoration: none;> 
								
									<li><a href="">手机电话卡></a></li><br/>
									<li><a href="">笔记本 平板</a></li><br/>
									<li><a href="">电视 盒子</a></li><br/>
									<li><a href="">路由器 智能硬件</a></li><br/>
									<li><a href="">移动电源 电池 插线板</a></li><br/>
									<li><a href="">耳机 音箱</a></li></br>
									<li><a href="">保护套 贴膜</a></li></br>
									<li><a href="">线材 支架 存储卡</a></li><br/>
									<li><a href="">箱包 服饰</a></li></br>
									<li><a href="">米兔 生活周边</a></li><br/>
							
	    					</ul>
	            	 </div>
	        	</div>


			


	            <div class="xia">
	        		 <div class="xia_one">
						 <img src="img/dierzhang.png">
	        		 </div>


	                 <div class="xia_two">
						 <img src="img/1.png">
	                 </div>

	                 <div class="xia_three">
						  <img src="img/disizhang.png">
	                 </div>

	                  <div class="xia_four">
	                     <img src="img/diwuzhang.png">

	                  </div>
	        	</div>



        	</div>

	    </div>


     <!-- 第二栏图框结束-->

     <!-- 第三栏图框架开始 -->
    <div class="kuang">
    	<div class="biaoti_mid">
				<h2>小米明星单品</h2>
		</div>
		<div class="chanpin">
			<div class="chanpin_mid">
				
					<div class="_img">
						<img src="img/diannao.jpg" width="160" height="160" alt=""/><br/><p>小米笔记本<br/>更轻薄，像杂志一样随身携带<br/>3499元起</p>
					</div>
					<div class="_img">
						<img src="img/dianyuan.png"   width="160" height="160" alt=""/><br/><p>小米移动电源2<br/>双向快充，高密度锂聚合物电芯<br/>79元</p>
					</div>
					<div class="_img">
					    <img src="img/erji.png"  width="160" height="160" alt=""/><br/><p>小米活塞耳机<br/>铝合金音腔，第三代平衡阻尼系统<br/>29元</p>
					</div>
					<div class="_img">
						<img src="img/chengzi.jpg"   width="160" height="160" alt=""/><br/><p>小米体重秤<br/>100克,喝水都可感知的精准<br/>90元</p>
					</div>
					<div class="_img">
						<img src="img/dianshi.png"  width="160" height="160" alt=""/><br/><p>小米电视3s 48英寸<br/>原装液晶屏，合属机身<br/>2599元</p>
					</div>
					
			</div>
		</div>  
	</div>			<!-- 第三个图框架结束 -->

   

				<!-- 第四个图框开始 -->
			<div class="zhineng">
				<div class="zhi_mid">
    				<div class="zhi_shang">
    		
						<h2>智能硬件</h2>

					</div>
					<div class="zhi_xia">
						<div class="tupian_l">
							<div class="tupian">
								<img src="img/one.jpg"  alt="" id="the-one"/>
							</div>
						</div>
			
						<div class="tupian_r">
							<div class="tupian">
								<a href="">
									<img src="img/two.jpg" alt="">
									<p>小米VR眼镜</p>
								</a>
									<p class="miaosu">配备9轴体感手柄，硬件级加速抗眩晕</p>	
									<p class="jiage">59元</p>
							</div>
							<div class="tupian">
								<a href="">
									<img src="img/94.jpg" alt="">
									<p>小米米家滑板电动车</p>
								</a>
									<p class="miaosu">极简几何设计，1 分钟轻松上手</p>	
									<p class="jiage">19999元</p>

							</div>
							<div class="tupian">
								<a href="">
									<img src="img/95.png" alt="">
									<p>米兔定位电话</p>
								</a>
									<p class="miaosu">高清双向通话，五重精准定位</p>	
									<p class="jiage">169元</p>
							</div>

							<div class="tupian">
								<a href="">
									<img src="img/96.jpg" alt="" class="mei">
									<p>米兔积木机器人</p>
								</a>
									<p class="miaosu">978个零件，享受挑战双手的乐趣</p>	
									<!-- <p class="jiage">499元</p> -->
							</div>
							<div class="tupian">
								<a href="">
									<img src="img/97.jpg" alt="">
									<p>米家空气净化器滤芯抗癌版</p>
								</a>
									<p class="miaosu">抗菌率达99%以上，有效吸附甲醛</p>	
									<p class="jiage">159元</p>
							</div>
							<div class="tupian">
								<a href="">
									<img src="img/98.jpg" alt="">
									<p>米家压力IH电饭锅</p>
								</a>
									<p class="miaosu">智能烹饪，灰铸铁粉体涂层内胆</p>	
									<p class="jiage">999元</p>
							</div>
							<div class="tupian">
								<a href="">
									<img src="img/99.jpg" alt="">
									<p>米兔智能故事机</p>
								</a>
									<p class="miaosu">微信远程互动，智能语音交互</p>	
									<p class="jiage">199元</p>
							</div>
							<div class="tupian">
								<a href="">
									<img src="img/0.jpg" alt="" class="mei">
									<p>米兔儿童手表Q</p>
								</a>
									<p class="miaosu">11 重安全设计，五重精准定位</p>	
									<p class="jiage">299元</p>
							</div>
							
					</div>
				</div>
			</div>

			<div style="clear:both;"></div>
			<!-- 第四个框架的结束 -->
			
			<div class="dapei">
				<div class="dapei_mid">
					<div class="dapei_shang">
						<h2>搭配</h2>
					</div>
					<div class="dapei_xia">
						<div class="picture same">
							 <a href=""> 
								<img src="img/hulian.jpg" alt="">
							 </a> 
						</div>
						<div class="picture">
							 <a href=""> 
								<img src="img/90.jpg" alt="" class="tu">
									<p>小米耳机</p>
									<p >299元</p>
							 </a> 
						</div>
						<div class="picture">
							 <a href=""> 
								<img src="img/89.jpg" alt="" class="tu">
									<p>小米圈铁耳机</p>
									<p>149元</p>
							 </a> 
						</div>
						<div class="picture">
							 <a href=""> 
								<img src="img/87.jpg" alt="" class="tu">
								<p>小米活塞耳机 清新版</p>
									<p>149元</p>
							 </a> 
						</div>
						<div class="picture">
							 <a href=""> 
								<img src="img/86.jpg" alt="" class="tu">
								<p>小米活塞耳机 清新版</p>
								<p>149元</p>
							 </a> 
						</div>
						<div class="picture same">
							 <a href=""> 
								<img src="img/79.png" alt="" >
							 </a> 
						</div>
						<div class="picture">
							 <a href=""> 
								<img src="img/85.jpg" alt="" class="tu">
								<p>小米活塞耳机 清新版</p>
									<p>149元</p>
							 </a> 
						</div>
						<div class="picture">
							 <a href=""> 
								<img src="img/84.jpg" alt="" class="tu">
								<p>小米活塞耳机 清新版</p>
									<p>149元</p>
							 </a> 
						</div>
						<div class="picture">
							 <a href=""> 
								<img src="img/83.jpg" alt="" class="tu" >
								<p>小米活塞耳机 清新版</p>
									<p>149元</p>
							 </a> 
						</div>
						<div class="picture">
							 <a href=""> 
								<img src="img/82.jpg" alt="" class="tu">
								<p>小米活塞耳机 清新版</p>
									<p>149元</p>
							 </a> 
						</div>
					</div>
				</div>
			</div>
					<!-- 配件 -->
			<div class="peijian">
				<div class="peijian_mid">
					<div class="peijian_shang">
						<h2>配件</h2>
					</div>
					<div class="peijian_xia">
						<div class="picture_1">
							 <a href=""> 
								<img src="img/peijian.jpg" alt="">
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/60.jpg" alt="">
								<p>小米5s智能智能保护套</p>
								<p>79元</p>
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/59.jpg" alt="">
								<p>小米5s智能智能保护套</p>
								<p>79元</p>
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/58.jpg" alt="">
								<p>小米5s智能智能保护套</p>
								<p>79元</p>
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/57.jpg" alt="">
								<p>小米5s智能智能保护套</p>
								<p>79元</p>
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/55.png" alt="" class="two">
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/56.jpg" alt="">
								<p>小米5s智能智能保护套</p>
								<p>79元</p>
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/54.jpg" alt="">
								<p>小米5s智能智能保护套</p>
								<p>79元</p>
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/53.jpg" alt="">
								<p>小米5s智能智能保护套</p>
								<p>79元</p>
							 </a> 
						</div>
						<div class="picture_1">
							 <a href=""> 
								<img src="img/52.jpg" alt="">
								<p>小米5s智能智能保护套</p>
								<p>79元</p>
							 </a> 
						</div>

					</div>
				</div>
			</div>
		 <!-- 周边框架开始 --> 
		 	<div class="zhoubian">
		 		<div class="zhoubian_mid">
		 			<div class="zhoubian_shang">
						<h2>周边</h2>
		 			</div>
		 			<div class="zhoubian_xia">
		 				<div class="picture_3">
		 					<img src="img/zhoubian.jpg" alt="" class="once">
		 				</div>
		 				<div class="picture_3">
		 					<img src="img/50.jpg" alt="">
		 					<p>最生活毛巾 青春系列</p>
		 					<p>29.9元</p>
		 				</div>
		 				<div class="picture_3">
		 					<img src="img/48.jpg" alt="">
		 					<p>最生活毛巾 青春系列</p>
		 					<p>29.9元</p>
		 				</div>
		 				<div class="picture_3">
		 					<img src="img/47.jpg" alt="">
		 					<p>最生活毛巾 青春系列</p>
		 					<p>29.9元</p>
		 				</div>
		 				<div class="picture_3 last">
		 					<img src="img/45.jpg" alt="">
		 					<p>最生活毛巾 青春系列</p>
		 					<p>29.9元</p>
		 				</div>
		 				<div class="picture_3">
		 					<img src="img/46.jpg" alt="" class="once">
		 				</div>
		 				<div class="picture_3">
		 					<img src="img/44.jpg" alt="">
		 					<p>最生活毛巾 青春系列</p>
		 					<p>29.9元</p>
		 				</div>
		 				<div class="picture_3">
		 					<img src="img/43.jpg" alt="">
		 					<p>最生活毛巾 青春系列</p>
		 					<p>29.9元</p>
		 				</div>
		 				<div class="picture_3">
		 					<img src="img/42.jpg" alt="">
		 					<p>最生活毛巾 青春系列</p>
		 					<p>29.9元</p>
		 				</div>
		 				<div class="picture_3 last">
		 					<img src="img/49.jpg" alt="">
		 					<p>最生活毛巾 青春系列</p>
		 					<p>29.9元</p>
		 				</div>
		 			</div>
		 		</div>
		 	</div>
		 	<div style="clear:both"></div>
		 	<!-- 推荐栏框架开始 -->
		 	<div class="tuijian">
		 			<div class="tuijian_shang">
		 				<h2>为你推荐</h2>
		 			</div>
		 			<div class="tuijian_xia">
		 				<div class="picture_4">
		 					<a href="">
								<img src="img/bijiben.jpg" alt="">
								<p>小米笔记本 AR 13.3英寸</p>
								<p>4999元</p>
							</a>
		 				</div>
		 				<div class="picture_4">
		 					<a href="">
							<img src="img/101.jpg" alt="">
							<p>小米笔记本 AR 13.3英寸</p>
								<p>4999元</p>
							</a>
		 				</div>
		 				<div class="picture_4">
		 					<a href="">
								<img src="img/102.jpg" alt="">
								<p>小米笔记本 AR 13.3英寸</p>
								<p>4999元</p>
							</a>
		 				</div>
		 				<div class="picture_4">
		 					<a href="">
								<img src="img/103.jpg" alt="">
								<p>小米笔记本 AR 13.3英寸</p>
								<p>4999元</p>
							</a>
		 				</div>
		 				<div class="picture_4  nine">
		 					<a href="">
								<img src="img/104.jpg" alt="">
								<p>小米笔记本 AR 13.3英寸</p>
								<p>4999元</p>
							</a>
		 				</div>
		 			</div>
		 	</div>
		 	<!-- 热评产品框架开始 -->
		 	<div class="reping">
		 			<div class="reping_shang">
		 				<h2>热评产品</h2>
		 			</div>
		 			<div class="reping_xia">
		 				<div class="picture_5">
		 					<a href="">
		 						<img src="img/reping.jpg" alt="">
		 						<p>安装简洁方便 信号不错</p>
		 						<p class="new">来自于追溯的评价</p>
		 						<p class="new_1">小米路由器3 149元</p>
		 					</a>
		 				</div>
		 				<div class="picture_5">
		 					<a href="">
		 						<img src="img/30.jpg" alt="">
		 						<p>安装简洁方便 信号不错</p>
		 						<p></p>
		 						<p></p>
		 						<p>来自于追溯的评价</p>
		 						<p>小米路由器3 149元</p>
		 					</a>
		 				</div>
		 				<div class="picture_5">
		 				<a href="">
		 					<img src="img/29.jpg" alt="">
		 					<p>安装简洁方便 信号不错</p>
		 						<p></p>
		 						<p></p>
		 						<p>来自于追溯的评价</p>
		 						<p>小米路由器3 149元</p>
		 				</a>
		 				</div>
		 				<div class="picture_5 good">
		 					<a href="">
		 						<img src="img/27.jpg" alt="">
		 						<p>安装简洁方便 信号不错</p>
		 						<p></p>
		 						<p></p>
		 						<p>来自于追溯的评价</p>
		 						<p>小米路由器3 149元</p>
		 					</a>
		 				</div>
		 			</div>
		 	</div>
			<!-- 推荐栏结束 -->
			<!-- 内容栏框架开始 -->
			<div class="neirong">
				<div class="neirong_mid">
					<div class="neirong_shang">
						<h2>内容</h2>
					<div class="neirong_xia">
						<div class="picture_6">
							<img src="img/neirong.png" alt="">
						</div>
						<div class="picture_6">
							<img src="img/neirong.png" alt="">
						</div>
						<div class="picture_6">
							<img src="img/neirong.png" alt="">
						</div>
						<div class="picture_6">
							<img src="img/neirong.png" alt="">
						</div>
					</div>
					</div>
				</div>
			</div>
			<!-- 内容栏框架结束 -->
			<!-- 视频栏框架开始 -->
			<div class="shipin">
				<div class="shipin_mid">
					<div class="shipin_shang">
						<h2>视频</h2>
					</div>
					<div class="shipin_xia">
						<div class="picture_7">
							<img src="img/shipin.jpg" alt="">
						</div>
						<div class="picture_7">
							<img src="img/shipin.jpg" alt="">
						</div>
						<div class="picture_7">
							<img src="img/shipin.jpg" alt="">
						</div>
						<div class="picture_7">
							<img src="img/shipin.jpg" alt="">
						</div>
					</div>
				</div>
			</div>
			<!-- 视频栏框架结束 -->
			<!-- 底部框架框架开始 -->
			<div class="bottom">
				<div class="bottom_mid">
					<div class="bottom_shang">
						<a href="">预约维修服务</a>
						<a href="">预约维修服务</a>
						<a href="">预约维修服务</a>
						<a href="">预约维修服务</a>
						<a href="">预约维修服务</a>
					</div>
					<div class="bottom_xia">
					<div class="bottom_list">
						<dl class="list_one">
							<dt>帮助中心</dt>
							<dd>账户管理</dd>
							<dd>购物指南</dd>
							<dd>订单操作</dd>
						</dl>
						<div class="bottom_list">
						<dl class="list_two">
							<dt>帮助中心</dt>
							<dd>账户管理</dd>
							<dd>购物指南</dd>
							<dd>订单操作</dd>
						</dl>
					</div>
					</div>
					</div>
				</div>
			</div>
			


	

				
    	







</div>
</body>
</html>